<template>
	<view class="container">
		<view class="list">
			<view class="title">交易记录</view>
			
			<view class="item" v-for="(item, i) in 10" :key="i">
				<view class="first">
					<view class="sub-title">充值记录</view>
					<!-- <view class="status">充值成功</view> -->
					<view class="status1">支付成功</view>
				</view>
				<view class="second">
					<view class="date">3023-10-26  11:56:43</view>
					<view class="count">-20.00</view>
				</view>
			</view>
			
			<!-- 加载前值为loadmore，加载中为loading，没有数据为nomore -->
			<u-loadmore :status="status" nomoreText="没有更多了~" color="#999999" marginTop="38rpx" />
		</view>
	</view>
</template>

<script setup>
	const status = ref('nomore')
</script>

<style lang="scss" scoped>
	.container {
		padding: 52rpx 26rpx;
		.list {
			padding: 32rpx 26rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 24rpx;
			}
			
			.item {
				padding: 22rpx 0;
				border-top: 1rpx solid #999999;
				.first {
					margin-bottom: 16rpx;
				}
				.first,
				.second {
					@include between(100%);
					.sub-title {
						color: #333333;
						font-size: 30rpx;
					}
					.status {
						font-size: 28rpx;
						color: #D86C12;
					}
					.status1 {
						font-size: 28rpx;
						color: #3DBE42;
					}
					.date {
						font-size: 24rpx;
						color: #999999;
					}
					.count {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>